<template>
	<view class="container">
		<view class="top-bg-img">
			<image src="https://imagecdn.lapetit.cn/postsystem/docroot/images/promotion/202010/128ACA2BCFC604F31F38327FA892DEA3.jpg"
			 mode="aspectFill"></image>
		</view>
		<view class="top-text">
			<view class="letter-spacing">黑糖波波奶茶</view>
			<view class="vip-text">会员专属 买一送一</view>
		</view>
		<view class="vip-card flex-column">
			<view class="vip-person">
				<view class="person-top" @click="bindPerson">
					<!-- #ifdef MP-WEIXIN -->
					<open-data type="userAvatarUrl"></open-data>
					<!-- #endif -->

					<!-- #ifdef MP-ALIPAY -->
					<view class="avatar-logo flex-cenetr" v-if="!isShowLogin">
						<view class="iconfont">
							<image src="../../static/img/login.svg" mode=""></image>
						</view>
					</view>
					<image v-else :src="userInfo.avatar" mode="aspectFit"></image>
					<!-- #endif -->
				</view>
				<view class="userName">
					<text v-show="isShowLogin">{{userInfo.nickName}}</text>
				</view>
				<view class="person-mation">
					<view class="login-text" v-show="!isShowLogin">
						<button>未登录</button>
					</view>
					<view class="login-text vip-login">
						<!-- #ifdef MP-WEIXIN -->
						<!-- 用户授权 -->
						<button open-type="getUserInfo" @getuserinfo="wxGetUserInfo" hover-class="none" v-show="!isShowLogin">
							<view class="login-img">
								<image src="" mode=""></image>
							</view>
							<text>登录</text>
						</button>
						<!-- 手机号授权 -->
						<button open-type="getPhoneNumber" @getphonenumber="wxGetPhoneNumber" hover-class="none"  v-show="isShowLogin && !isShowPoints">
							<view class="login-img"></view>
							<text>会员</text>
						</button>
						<!-- #endif -->
						
						<!-- #ifdef MP-ALIPAY -->
						<button open-type="getAuthorize" @getAuthorize="myGetAuthorize" scope="userInfo" hover-class="none" v-show="!isShowLogin">
							<view class="login-img"></view>
							<text>登录</text>
						</button>
						<button open-type="getAuthorize" @getAuthorize="myGetPhoneNumber" scope='phoneNumber' hover-class="none" v-show="isShowLogin && !isShowPoints">
							<view class="login-img"></view>
							<text>会员</text>
						</button>
						<!-- #endif -->
					</view>

					<!-- <view class="right-text" v-if="isShowPoints"> -->
					<view class="right-text">
						<view class="grade-img">
							<image src="../../static/img/grade.svg" mode="widthFix"></image>
							<text>等级名称</text>
						</view>
					</view>
				</view>
				<view class="person-code flex-cenetr" v-if="isShowPoints">
					<view class="iconfont">
						<image src="../../static/img/code.svg" mode="widthFix"></image>
					</view>
					<text>会员码</text>
				</view>
			</view>
			<!-- 普通用户信息 -->
			<view class="vip-box flex-between"  v-if="isShowLogin && !isShowPoints">
				<view class="vip-f flex-cenetr-wrap" @click="bindCoupon">
					<view class="f-w500">12</view>
					<view class="f-14">我的卡券</view>
				</view>
			</view>
			<!-- 会员用户信息 -->
			<view class="vip-box flex-between" v-if="isShowPoints">
				<view class="vip-f flex-cenetr-wrap" @click="bingKing"  >
					<view class="f-w500">128</view>
					<view class="f-14">KING币数</view>
				</view>
				<view class="vip-f flex-cenetr-wrap" @click="bindBalance">
					<view class="f-w500">100.00</view>
					<view class="f-14">储值余额(元)</view>
				</view>
				<view class="vip-f flex-cenetr-wrap" @click="bindCoupon">
					<view class="f-w500">12</view>
					<view class="f-14">我的卡券</view>
				</view>
			</view>
		</view>
		<!-- 箭头-->
		<view class="iconfont icon-arrow-backimg"></view>
		<!-- 点餐 -->
		<view class="order-icon flex-cenetr-around">
			<view class="icon flex-cenetr-wrap">
				<view class="icon-img flex-cenetr">
					<image src="../../static/img/takeOut.svg" mode="widthFix"></image>
				</view>
				<text>外卖</text>
			</view>
			<view class="icon flex-cenetr-wrap">
				<view class="icon-img flex-cenetr">
					<image src="../../static/img/order.svg" mode="widthFix"></image>
				</view>
				<text>点餐</text>
			</view>
			<view class="icon flex-cenetr-wrap">
				<view class="icon-img flex-cenetr">
						<image src="../../static/img/bill.svg" mode="widthFix"></image>
				</view>
				<text>账单</text>
			</view>
		</view>
		<view class="banner">
			<view class="banner-card">
				<view class="b-card">
					<image src="../../static/img/1-1.png" mode="aspectFill"></image>
					<view class="rights-card1">超值权益卡</view>
					<view class="rights-card2">超值权益</view>
				</view>
				<view class="b-card">
					<image src="../../static/img/1-2.png" mode="aspectFill">
						<view class="rights-card1">超值优惠券</view>
						<view class="rights-card2">5折起</view>
					</image>
				</view>
				<view class="b-card bottom-no">
					<image src="../../static/img/1-3.png" mode="aspectFill">
						<view class="rights-card1">拼团</view>
						<view class="rights-card2">团购更优惠</view>
					</image>
				</view>
				<view class="b-card bottom-no">
					<image src="../../static/img/1-4.png" mode="aspectFill">
						<view class="rights-card1">积分商城</view>
						<view class="rights-card2">积分兑换</view>
					</image>
				</view>
			</view>
			<view class="list" v-show="false">
				<view class="pic-list" v-for="(item,index) in listPic" :key="item.id">
					<view class="picture">
						<image :src="item.imgUrl"></image>
					</view>
					<view class="p-title clamp">
						<text>{{item.desc}}</text>
					</view>
					<view class="p-date">
						<text>{{item.date}}</text>
					</view>
					<view class="p-btn">
						<text>立即领取</text>
					</view>
				</view>
			</view>
		</view>
		<view class="center-bg-img">
			<image src="https://imagecdn.lapetit.cn/postsystem/docroot/images/promotion/201910/3534703368F796F9E50FF46D5F6B6EBE.jpg"
			 mode="aspectFill"></image>
		</view>
		<view class="couponList">
			<view class="title flex-cenetr">
				<view class="c-left"></view>
				<view class="c-text flex-cenetr">
					<view class="iconfont icon-disanfang1"></view>
					<view class="value">超值优惠券</view>
				</view>
				<view class="c-left"></view>
			</view>

			<view class="coupon-picture">

			</view>
		</view>
	</view>
</template>

<script>
	/** 
	 * 1、判断普通用户：个人信息（授权） （控制登录按钮的显示与隐藏）前端缓存
	 * 2、判断会员用户：手机号（授权）是否存在，需要后端返回状态或者 前端缓存
	 * 3、
	 * */
	import util from '../../utils/utils.js'
	export default {
		data() {
			return {
				userInfo: {}, //用户信息
				isShowLogin: false, //用户登录状态
				isShowPoints: false, //会员登录状态
				listPic: [{
						'id': 1,
						'imgUrl': 'https://imagecdn.lapetit.cn/postsystem/docroot/images/goods/201211/10491/list_10491.jpg?v=1571368413',
						'desc': '芋泥+伯爵茶神仙CP 治愈系',
						'date': '2020-10-09至2020-10-16有效'
					},
					{
						'id': 2,
						'imgUrl': 'https://imagecdn.lapetit.cn/postsystem/docroot/images/goods/202010/23520/list_23520.jpg?v=1603164302',
						'desc': '清新蓝莓 邂逅巴斯克流心',
						'date': '2020-10-09至2020-10-16有效'
					},
					{
						'id': 3,
						'imgUrl': 'https://imagecdn.lapetit.cn/postsystem/docroot/images/goods/201912/22850/list_22850.jpg?v=1586341287',
						'desc': '经典雪域迎“锦鲤” 口口浓醇好运',
						'date': '2020-10-09至2020-10-16有效'
					}
				],
			}
		},
		onLoad() {
			// 判断用户是否已经授权
			const value = uni.getStorageSync('userInfo');
			if(value){
				this.userInfo = value;
				this.isShowLogin = true;
			}
			console.log(value)
		},
		methods: {
			// 登录事件
			isLogin(provider,_userInfo) {
				uni.login({
					provider: provider,
					success: res => {
						console.log('登录信息', res)
						uni.setStorageSync('userInfo', _userInfo);
						this.userInfo = _userInfo;
					}
				})
			},

			// 用户信息授权
			// #ifdef MP-WEIXIN
			wxGetUserInfo(res) {
				console.log(res)
				if (res.detail.iv) {
					this.isShowLogin = true;
					this.isLogin('weixin',res.detail.userInfo)
				} else {
					return util.showToast('您取消了授权,登录失败')
				}
			},
			// 获取手机号授权
			wxGetPhoneNumber(e) {
				console.log('手机号授权', e)
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					console.log('手机号授权', e)
					this.isShowPoints = true;
					uni.login({
						provider: 'weixin',
						success: res => {
							console.log('登录信息', res)
							let data = {}
							data.code = res.code
							data.encryptedData = e.detail.encryptedData
							data.iv = e.detail.iv
							// this.$http.post(url,data,options).then(res1=>{
							// 	if(res1.code===0){
							// 		console.log(res1.data)							
							// 		wx.setStorageSync('phone', res.data.phoneNumber);
							// 	}
							// })
						}
					})
				} else {
					return util.showToast('您取消了授权,会员登录失败')
				}
			},
			// #endif
			
			// #ifdef MP-ALIPAY
			myGetAuthorize(e) {
				console.log(e)
				if (my.canIUse('button.open-type.getAuthorize')) {
					my.getOpenUserInfo({
						fail: (res) => {},
						success: (res) => {
							let userInfo = JSON.parse(res.response).response // 以下方的报文格式解析两层 response
							console.log(userInfo);
							this.isShowLogin = true;
							this.isLogin('apipay',userInfo)
						},
					});
				} else {
					return util.showToast('您取消了授权,会员登录失败')
				}
			},
			myGetPhoneNumber(e) {
				my.getPhoneNumber({
					success: (res) => {
						console.log(res)
						// let encryptedData = res.response;
						// let params={
						//   encryptedData:res.response,
						//   sign:res.sign
						// }
						// this.getPhoneNumberAli(params);
					},
					fail: (res) => {
						// this.$request.setErrorMessage("获取用户手机号失败")
						return util.showToast('获取用户手机号失败')
					},

				})
			},
			// #endif
			// 个人信息
			bindPerson() {
				uni.navigateTo({
					url: '../personal/personal'
				})
			},
			// 账单
			bindBalance() {
				uni.navigateTo({
					url: '../accountBalance/accountBalance'
				})
			},
			// king币
			bingKing() {
				uni.navigateTo({
					url: '../king/king'
				})
			},
			// 我的卡券
			bindCoupon() {
				uni.navigateTo({
					url: '../coupon/coupon'
				})
			}
		}
	}
</script>

<style>
	@import url("../../common/css/iconfont.css");
	@import url("../../common/css/common.css");

	page {
		background-color: #fff;
		padding-bottom: 100rpx;
	}

	.top-bg-img {
		width: 100%;
		height: 582rpx;
		margin-bottom: 20rpx;
	}

	.avatar-logo{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #fff;
	}
	.top-text {
		position: absolute;
		top: 146rpx;
		left: 36rpx;
	}

	.top-text .letter-spacing {
		height: 62rpx;
		font-size: 48rpx;
		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
		font-weight: bold;
		color: #F9FDFD;
		line-height: 60rpx;
		letter-spacing: 14rpx;
		margin-bottom: 16rpx;
	}

	.top-text .vip-text {
		height: 40rpx;
		font-size: 30rpx;
		font-family: MicrosoftYaHei;
		color: #E7D7A4;
		line-height: 40rpx;
		letter-spacing: 4rpx;
	}

	/* 会员卡 */
	.vip-card {
		position: absolute;
		top: 420rpx;
		left: 0;
		right: 0;
		margin: auto;
		padding: 20rpx 20rpx 26rpx 28rpx;
		width: 692rpx;
		height: 264rpx;
		background: linear-gradient(180deg, #FFF2C6 0%, #D0BD84 100%);
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
		border-radius: 16rpx;
		box-sizing: border-box;
	}

	.vip-person {
		display: flex;
	}

	.userName {
		position: absolute;
		left: 160rpx;
		top: 40rpx;
		height: 42rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #A9842E;
		line-height: 40rpx;
	}

	.person-top {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.right-text {
		width: 400rpx;
		position: absolute;
		top: 56rpx;
		margin-left: 26rpx;
	}
	.grade-img{
		width: 106rpx;
		position: relative;
	}
	.grade-img text{
		position: absolute;
		top:-10rpx;
		right:12rpx;
		font-size: 14rpx;
		height: 20rpx;
		color: #856427;
	}
	.person-code {
		width: 180rpx;
		height: 70rpx;
		border-radius: 20rpx;
		background-color: #fff;
		color: #e1d5b7;
		margin-top: 20rpx;
		position: absolute;
		right: 20rpx;
	}
	.person-code .iconfont{
		width: 26rpx;
	}
	/* 权益积分 */
	.vip-box {
		width: 100%;
		color: #ac8833;
	}

	.vip-box .vip-f {
		width: 33%;
		height: 100%;
	}

	.f-w500 {
		font-weight: 600;
		height: 44rpx;
		font-size: 48rpx;
		font-family: Avenir-Heavy, Avenir;
		font-weight: 800;
		color: #A9842E;
		line-height: 44rpx;
		margin-bottom: 12rpx;
	}

	.f-14 {
		height: 36rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #A9842E;
		line-height: 36rpx;
	}

	/* 点餐 */
	.order-icon {
		width: 100%;
		height: 152rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: absolute;
		top: 720rpx;
	}

	.icon {
		width: 33%;
		height: 100%;
	}

	.icon .icon-img {
		width: 72rpx;
	}


	/* 卡片 */
	.banner {
		width: 100%;
		background-color: #F4F5F7;
		margin-top: 280rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.list {
		padding: 0 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.pic-list {
		width: 43%;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.picture {
		width: 100%;
		height: 300rpx;
		margin-bottom: 10rpx;
	}

	.p-title {
		width: 100%;
		min-height: 80rpx;
	}

	.p-date {
		width: 100%;
	}

	/* #ifdef MP-WEIXIN */

	.p-date text {
		font-size: 20rpx;
	}

	/* #endif */

	/* #ifdef MP-ALIPAY */

	.p-date text {
		font-size: 24rpx;
	}

	/* #endif */

	.p-btn {
		width: 50%;
		height: 50rpx;
		background-color: #4CD964;
		border-radius: 20rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.banner-card {
		width: 100%;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 28rpx 46rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.b-card {
		width: 336rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.rights-card1 {
		position: absolute;
		top: 22rpx;
		left: 28rpx;
		height: 38rpx;
		font-size: 28rpx;
		font-family: MicrosoftYaHei;
		color: #000000;
		line-height: 38rpx;
		letter-spacing: 1px;
	}

	.rights-card2 {
		position: absolute;
		top: 66rpx;
		left: 28rpx;
		height: 28rpx;
		font-size: 20rpx;
		font-family: MicrosoftYaHei;
		color: #D4D4D4;
		line-height: 28rpx;
		letter-spacing: 1px;
	}

	.banner-card .bottom-no {
		margin-bottom: 0;
	}

	/* 新版 */
	.person-mation {
		height: 80rpx;
		margin: 12rpx 0 0;
		position: relative;
	}

	.login-text {
		width: 146rpx;
		height: 56rpx;
		position: absolute;
		left: 0;
	}

	.person-mation button {
		width: 146rpx;
		height: 56rpx;
		border-width: 0px;
		font-style: normal;
		line-height: 56rpx;
		background-color: unset;
		color: #fff;
		font-size: 30rpx;
		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
		font-weight: bold;
	}

	.person-mation .vip-login button {
		width: 146rpx;
		height: 56rpx;
		background: #F9FDFD;
		border-radius: 28rpx;
		color: #4A4A4A;
		font-size: 26rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.person-mation .vip-login .login-img {
		width: 40rpx;
		height: 28rpx;
		/* background: #4A4A4A; */
		margin-right: 6rpx;
	}

	.person-mation .vip-login {
		width: 198rpx;
		position: absolute;
		left: 280rpx;
	}

	.icon-arrow-backimg {
		width: 20rpx;
		height: 20rpx;
		font-size: 20rpx;
		position: absolute;
		top: 680rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.center-bg-img {
		width: 100%;
		height: 350rpx;
		background-color: ;
	}

	/* 推荐 */
	.couponList .title {
		width: 100%;
		height: 102rpx;

	}

	.couponList .c-left {
		width: 64rpx;
		height: 4rpx;
		background-color: #DDDDDDFF;
	}

	.couponList .c-text {
		margin: 0 36rpx;
	}

	.couponList .value {
		height: 38px;
		font-size: 28rpx;
		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
		font-weight: bold;
		color: #000000;
		line-height: 38px;
		letter-spacing: 1px;
		margin-left: 4rpx;
	}
</style>
